<template>
	<view class="comment">
		<SRV-topbar title="评价商家"  isLeft='true'></SRV-topbar>
		<view class="content">
			<view class="info">
				<view class="top">
					<view class="info_name">
						<image class="goodimg" :src="info.picture" mode="aspectFill"></image>
						<text>{{ info.title }}</text>
					</view>				
					<view class="item">
						<view class="name" v-for="(item,index2) in list" :key="index2" @click="setScores(index2)">
							<view :class="(index2 == 0 && evaluate.scores == 5) || (index2 == 1 && evaluate.scores == 3) || (index2 == 2 && evaluate.scores == 1)?'sel':'nosel'"></view>
							<image :src="(index2 == 0 && evaluate.scores == 5) || (index2 == 1 && evaluate.scores == 3) || (index2 == 2 && evaluate.scores == 1)
								? 'https://hdsq.aoorange.cn/attachment/xcx/icon/mal'+index2+'.png'
								: 'https://hdsq.aoorange.cn/attachment/xcx/icon/normal'+index2+'.png'"
							 mode="aspectFill"></image>
						</view>
					</view>
				</view>
                <textarea value="" v-model="evaluate.content"  placeholder="输入您对商家对评价" />
			</view>
			<view class="add" >
				<view class="photo_list" v-for="(item,index) in imgList" :key="index">
				   <image :src="item.imgUrl" mode="aspectFill"></image>
				   <image @click="delImg(index)" v-if="imgList.length > 0" src="https://club.aoorange.cn/attachment/xcx/icon/del1.png" class="del" mode="aspectFill"></image>
				   <!-- <view @click="delImg(index)" v-if="imgList.length > 0">删除</view> -->
				</view>
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/addphoto.png" mode="aspectFill" @click="chooseImg()"></image>
			</view>
		</view>
		
		<view class="bottom" @click="subEvaluate()"  :style="'height:' + bottomHeight + 'rpx;'">提交评价</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				list: [{
					ischeck: true,
					text:"好评"
				}, {
					ischeck: false,
					text:"中评"
				}, {
					ischeck: false,
					text:"差评"
				}],
				ischeck:false,
				id : 0,
				info : {},
				imgNum : 0,
				imgList: [],
				evaluate: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					merchantId : 0,
					orderId : 0,
					scores : 5,
					content :'',
					imgPath : '',
				},
				bottomHeight: 110,/* 底部按钮高度，避免iPhonex导航黑条 */
			}
		},
		methods: {
			getInfo() {
				var self = this;
				serve
					.request({
						url: '/marketing/merchant/view',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							id: self.id
						}
					})
					.then(res => {
						self.info = res.data;
					});
			},
			setScores(scoresKey) {
				let scores = scoresKey == 0 ? 5 : (scoresKey == 1 ? 3 : 1);
				this.evaluate.scores = scores;
				this.$forceUpdate();
			},
			chooseImg(){
				if(this.imgNum >= 9) {
					return ;
				}
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						if((Number(this.imgNum) + Number(tempFilePaths.length)) > 9) {
							uni.showToast({
								title: "最多能上传9张图片，还能上传"+(Number(9) - Number(this.imgNum))+"张图片",
								icon: 'none',
							});
							return ;
						}
				        tempFilePaths.forEach((imgPath, key) => {
							// console.info(imgPath);
							this.uploadImg(imgPath);
						});
				    }
				});
			},
			uploadImg(uploadImgPath) {
				uni.uploadFile({
				    url: serve.apiUrl()+'/v1/file/images?appkey='+ uni.getStorageSync('appkey'), 
				    filePath: uploadImgPath,
				    name: 'file',
				    formData: {
				        'access-token': uni.getStorageSync('access-token'),
				    },
				    success: (uploadFileRes) => {
						let result = JSON.parse(uploadFileRes.data);
						if(result.code == 200) {
							let imgArr = [{}];
							this.$set(imgArr[0], 'imgUrl', result.data.imgUrl);
							this.$set(imgArr[0], 'imgPath', result.data.imgPath);
							this.imgList = this.imgList.concat(imgArr);
							console.log(this.imgList);
							this.imgNum = Number(this.imgNum) + Number(1);
						} else {
							uni.showToast({
								title: result.message,
								icon: 'none',
							})
						}
				    }
				});
			},
			delImg(key) {
				this.imgList.splice(key,1);
				this.imgNum = Number(this.imgNum) - Number(1);
			},
			subEvaluate() {
				var self = this;
				var imgPath = '';
				self.imgList.forEach((item, index) => {
					imgPath += (index > 0 ? ";" : "") + item.imgPath;
				});
				self.evaluate.imgPath = imgPath;
				if(self.evaluate.content == "") {
					uni.showToast({
						title: "请填写评论内容",
						icon: 'none',
					});
					return ;
				}
				serve
					.request({
						url: '/marketing/evaluate/create',
						data: self.evaluate
					})
					.then(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							success:function(){
								if(res.code == 200) {
									uni.navigateBack({
									    delta: 1
									});
								}
							} 
						});
					});
			},
		},
		onLoad(options) {
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				this.bottomHeight = 150;
			}
			if (uni.getStorageSync('access-token') == '') {
				common.jump('login');
				return ;
			}
			this.id=options.id || 0;
			this.evaluate.orderId=options.orderId || 0;
			this.evaluate.merchantId = this.id;
			if(this.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							this.jump('return_one')
						}, 2000) 
					}
				});
			}
			this.getInfo();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh(); //结束下拉加载状态
			}, 1000);
		}
	}
</script>

<style scoped lang="scss">
	.comment {
		padding-bottom: 100upx;
		.info {
			box-sizing: border-box;
			padding: 40upx 30upx 0upx;
			textarea{
				margin-top: 40upx;
				box-shadow: box-sizing;
				padding: 33upx 39upx;
				height:176upx;
				background:#F7F7F7;
				border-radius:12px;
			}
			.top {
				display: flex;
				flex-direction: column;
				.info_name{
					display: flex;
					align-items: center;
					color: #333333;
					font-size: 38upx;
					.goodimg {
						width: 80upx;
						height: 80upx;
						margin-right: 26upx;
					}
				}			

				.item {
					display: flex;
					align-items: center;
					margin-top: 40upx;
                    margin-left: -43upx;
					.name {
						display: flex;
						align-items: center;
						margin-left: 43upx;
						font-size: 28upx;
						color: #999999;
						.sel {
							background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/xuanzhong.png);
							background-repeat: no-repeat;
							width: 40upx;
							height: 40upx;
							background-size: 100%;
						}

						.nosel {
							width: 36upx;
							height: 36upx;
							border: 1upx solid #CCCCCC;
							border-radius: 50%;
						}
						.check{
							color: #EB5938;
						}

						image {
							width:120upx;
							height:39upx;
							margin-left: 16upx;
							margin-right: 14upx;
						}
					}
				}
			}

		}
		.add{
			.photo_list{
				// margin-right: 30upx;
				padding-bottom: 20upx;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				position: relative;
				view{
					color: red;
					font-size: 30upx;
				}
				.del{
					width: 48upx !important;
					position: absolute;
					height: 48upx !important;
					top: -24upx;
					right: -24upx;
				}
			}
			display: flex;
			flex-wrap: wrap;
			padding-top: 18upx;
			image{
				width:200upx;
				height:200upx;
				border-radius:10upx;
				margin-left: 30upx;
				margin-top: 30upx;
			}
		}
		.bottom {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			font-size: 32upx;
			color: rgba(255, 255, 255, 1);
			background: #FFBC00;
			bottom: 0upx;
			position: fixed;
		}
	}
</style>
